<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>实现学校首页鼠标移入事件</title>
		<style>
			* {
				padding: 0;
				margin: 0 auto;
			}
			
			.tab-box {
				width: 500px;
				height: 500px;
				background: gray;
				text-align: center;
			}
			
			.tab-head-div {
				font-size: 12px;
				color: white;
			}
			#a{
				display: none;
			}
			
		</style>
	</head>

	<body>
		<div class="tab-box">
			<div class="tab-head">
				<span class="tab-head-div current">通知通告</span>
				<span>\</span>
				<span class="tab-head-div">招标公告</span>
			</div>
			<div class="tab-body">
				<span class="tab-body-div current">
					<h3>关于章胡航等12位同志转为中共正式党员的公示</h3>
					<p>&nbsp;根据本人申请、组织培养，经研究，拟同意章胡航等12名同志转...</p>
					<h3>关于陈涛等4位同志转为中共正式党员的公示</h3>
					<p>根据本人申请、组织培养，经汽车与机械工程分院第一学生党支...</p>
					<h3>关于宋曼等4位同志转为中共正式党员的公示</h3>
					<p>根据本人申请、组织培养，经汽车与机械工程分院第二学生党支...</p>
					<h3>关于章莎莎等8位同志转为中共正式党员的公示</h3>
					<p>经学生党总支研究，拟将章莎莎等8位同志转为中共正式党员，现...</p>
				</span>
				<span class="tab-body-div" id="a">
					<h3>关于组织开展2018年浙江工贸职业技术学院大学生暑期社会实践活动的通知</h3>
					<p>各院（系）、部门：为深入学习宣传贯彻习近平总书记关于青年...</p>
					<i>2018-06-07</i>
				</span>
			</div>
		</div>
		<script>
			var tabs = document.getElementsByClassName('tab-head-div');
			var divs = document.getElementsByClassName('tab-body-div');
			for(var i = 0; i < tabs.length; i++) {
				tabs[i].onmouseover = function() {
					this.style.fontSize = "36px";
					for(var j = 0; j < divs.length; j++) {
						if(this == tabs[j]) {
							divs[j].style.display='block';
						} else {
							divs[j].style.display='none';
						}
					}
				}
				tabs[i].onmouseleave = function() {
					this.style.fontSize = "12px";
				}
			}
		</script>
	</body>

</html>
